package com.turman.coroutionsample.view

import androidx.compose.foundation.layout.*
import androidx.compose.material.Button
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.lifecycle.viewmodel.compose.viewModel
import com.turman.coroutionsample.ui.theme.CoroutionSampleTheme
import com.turman.coroutionsample.viewmodel.StateFlowViewModel

@Composable
fun StateFlowPage() {
    val viewModel = viewModel<StateFlowViewModel>()
    val number by viewModel.number.collectAsState()
    CoroutionSampleTheme {
        Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colors.background) {
            Column {
                Text(
                    text = "$number",
                    modifier = Modifier.fillMaxWidth(),
                    textAlign = TextAlign.Center
                )
                Spacer(modifier = Modifier.height(20.dp))

                Row(
                    horizontalArrangement = Arrangement.SpaceEvenly,
                    modifier = Modifier.fillMaxWidth()
                ) {
                    Button(onClick = { viewModel.inCrement() }) {
                        Text(text = "Add")
                    }
                    Button(onClick = { viewModel.deCrement() }) {
                        Text(text = "Sub")
                    }
                }
            }
        }
    }
}